<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="渠道姓名">
					<el-input
						class="w-[280px]"
						v-model="queryParams.channel_name"
						clearable
					/>
				</el-form-item>
				<el-form-item label="产品名称">
					<el-input
						class="w-[280px]"
						v-model="queryParams.product_name"
						clearable
					/>
				</el-form-item>
				<el-form-item label="补贴方式">
				<el-select class="w-[280px]" v-model="queryParams.subsidy_type">
					<el-option label="全部" value/>
					<el-option label="补贴金额" :value="1"/>
					<el-option label="返点" :value="2"/>
				</el-select>
				</el-form-item>

				<el-form-item>
				<el-button type="primary" @click="resetPage">查询</el-button>
				<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>

			<div class="pt-8">
				<el-button type="primary" v-perms="['product.product/saveSubsidy']" class="mb-4" @click="onClick_add">
					<template #icon>
						<icon name="el-icon-Plus"/>
					</template>
					新增
				</el-button>
			</div>

            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" prop="id" min-width="90" />
				<el-table-column label="参与渠道" prop="channel_name" min-width="180" />
				<el-table-column label="补贴产品" prop="product_name" min-width="220" />
				<el-table-column label="补贴方式" prop="subsidy_type" min-width="180" >
					<template #default="{ row }">
						<span v-if="row.subsidy_type == 1">补贴金额</span>
						<span v-if="row.subsidy_type == 2">根据贷款额度返点</span>
					</template>
				</el-table-column>
				<el-table-column label="补贴金额" prop="money" min-width="180" >
					<template #default="{ row }">
						<span v-if="row.subsidy_type == 1">{{ row.money }}</span>
						<span v-if="row.subsidy_type == 2">{{ row.num }}%</span>
					</template>
				</el-table-column>
				<el-table-column label="参与时间" prop="create_time" min-width="180" />
				<el-table-column label="补贴次数" prop="count" min-width="180" />
				<el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
						<el-link class="mr-2.5" v-perms="['product.product/subsidyInfo']" type="primary" :underline="false" @click="showDetail(row)">详情</el-link>
                        <el-button v-perms="['product.product/delSubsidy']" type="danger" link @click="handleDetele(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>

		<el-dialog v-model="subsidyVisible" title="参与补贴" width="500">
			<div class="mb-2">参与后，渠道与客户以该产品达成合作后，用户会获得平台补贴</div>
			<el-form :model="form" :rules="show_rules" ref="formShow" label-width="120">
				<el-form-item label="关联产品" prop="product_id">
					<el-select class="w-[300px]" v-model="form.product_id" placeholder="请选择" clearable filterable @change="onChange_product" @clear="onClear_product">
						<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="选择渠道" prop="channel_id">
					<el-select class="w-[300px]" v-model="form.channel_id" placeholder="请选择" clearable filterable :disabled="form.product_id == ''">
						<el-option v-for="item in channelList" :key="item.id" :label="item.real_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="补贴方式" prop="subsidy_type">
					<el-radio-group v-model="form.subsidy_type">
						<el-radio :label="1">直接补贴</el-radio>
						<el-radio :label="2">根据贷款金额返点（%）</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.subsidy_type == 1" label="补贴金额（元）" label-width="120px" prop="money">
					<el-input-number
						v-model="form.money"
						class="w-[300px]"
						controls-position="right"
					/>
				</el-form-item>
				<el-form-item v-if="form.subsidy_type == 2" label="补贴金额（%）" label-width="120px" prop="num">
					<el-input-number
						v-model="form.num"
						class="w-[300px]"
						controls-position="right"
						@change="onChange_num"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
				<el-button @click="subsidyVisible = false">取消</el-button>
				<el-button type="primary" v-perms="['product.product/saveSubsidy']" @click="showAdd">
					确定
				</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="subsidyList">
	import type {FormInstance} from 'element-plus'
	import { subsidyList, delSubsidy, saveSubsidy, subsidyInfo, searchChannel } from '@/api/operation';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import {getRoutePath} from '@/router'
	import {productLists} from '@/api/product/product';

	//  外部的筛选
	const queryParams = reactive({
		channel_name: '',
		product_name: '',
		subsidy_type: '',
	})

	const baseUrl = `${import.meta.env.VITE_URL_LINK || ''}`

    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: subsidyList,
		params: queryParams
	})

	const subsidyVisible = ref(false)
	const onClick_add = () => {
		form.id = '';
		form.product_id = '';
		form.channel_id = '';
		form.subsidy_type = '';
		form.money = '';
		form.num = '';
		formShow.value?.resetFields()
		formShow.value?.clearValidate()
		subsidyVisible.value = true;
	}

	const formShow = shallowRef<FormInstance>()
	// 弹窗提交的表单
	const form:any = reactive({
		id: undefined,
		product_id: '',
		channel_id: '',
		subsidy_type: '',
		money: undefined,
		num: undefined
	})
	const show_rules = reactive({
		product_id: [{required: true, message: '请选择关联产品', trigger: 'blur'}],
		channel_id: [{required: true, message: '请选择渠道', trigger: 'blur'}],
		subsidy_type: [{required: true, message: '请选择补贴方式', trigger: 'blur'}],
		money: [{required: true, message: '请填写补贴金额', trigger: 'blur'}],
		num: [{required: true, message: '请填写补贴金额', trigger: 'blur'}],
	})
	const onChange_product = (val:number) => {
		console.log(val)
		form.channel_id = '';
		getChannel()
	}
	const onClear_product = () => {
		console.log('onClear_produce')
		form.channel_id = '';
	}
	const productList:any = ref([])
	// 产品数据
	const getProduct = async () => {
		const data = await productLists({
			page_no: 1,
			page_size: 9999,
			is_online: 1 ,// 已上架
		})
		productList.value= data.lists;
	}
	getProduct()

	const channelList:any = ref([])
	const getChannel = async () => {
		console.log('getChannel'+form.product_id)
		const data = await searchChannel({
			product_id: form.product_id
		})
		console.log(data)
		channelList.value= data;
	}
	// 表单确认
	const showAdd = async () => {

		await formShow.value?.validate();
		console.log(form)
		// return false;

		await saveSubsidy(form)
		subsidyVisible.value = false;
		getLists()
	}
	const onChange_num = (currentValue: number | undefined, oldValue: number | undefined) => {
		console.log(currentValue)
		console.log(oldValue)
	}
	// 详情按钮
	const showDetail = async (row:any) => {
		const data = await subsidyInfo({id: row.id})
		console.log(data)
		form.id = data.id;
		form.product_id = data.product_id;
		form.channel_id = data.channel_id;
		form.subsidy_type = data.subsidy_type;
		form.money = data.money;
		form.num = data.num;
		console.log(form)
		formShow.value?.clearValidate()
		getChannel()
		subsidyVisible.value = true;
	}
    
	//删除
	const handleDetele = async (id: number) => {
		try{
			await feedback.confirm('删除参与后，渠道与客户再以该产品与用户达成合作，用户不会获得平台补贴', '删除','error')
			await delSubsidy({id});
			getLists();
		}catch(error){
			console.log(error)
		}
	}
    
	getLists()
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}

</style>